<template>
  <!-- 回测结果统计 -->
  <el-card shadow="hover" style="margin-top: 20px;">
    <template #header>
      <div class="card-header">
        <span>回测结果统计</span>
      </div>
    </template>
    <div class="result-stats">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="stat-item">
            <div class="stat-label">总收益率</div>
            <div class="stat-value" :class="backtestSummary.totalReturn >= 0 ? 'profit' : 'loss'">
              {{ backtestSummary.totalReturn.toFixed(2) }}%
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="stat-item">
            <div class="stat-label">年化收益率</div>
            <div class="stat-value" :class="backtestSummary.annualReturn >= 0 ? 'profit' : 'loss'">
              {{ backtestSummary.annualReturn.toFixed(2) }}%
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="stat-item">
            <div class="stat-label">夏普比率</div>
            <div class="stat-value">
              {{ backtestSummary.sharpeRatio.toFixed(2) }}
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="8">
          <div class="stat-item">
            <div class="stat-label">最大回撤</div>
            <div class="stat-value loss">
              {{ backtestSummary.maxDrawdown.toFixed(2) }}%
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="stat-item">
            <div class="stat-label">胜率</div>
            <div class="stat-value">
              {{ backtestSummary.winRate.toFixed(2) }}%
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="stat-item">
            <div class="stat-label">总交易次数</div>
            <div class="stat-value">
              {{ backtestSummary.totalTrades }}
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'BacktestStats',
  props: {
    backtestSummary: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.result-stats {
  padding: 20px 0;
}

.stat-item {
  text-align: center;
  padding: 15px;
  background: #f5f7fa;
  border-radius: 4px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
}

.stat-value.profit {
  color: #14b143;
}

.stat-value.loss {
  color: #ef232a;
}
</style>